https://codepen.io/hereiscasio/pen/dgKWEX?editors=1010

Used UI Component ( #1 )

#1 Silder

UI 圖來源見此

Discussion

<div class="triangle triangle-top-right"></div>
<div class="triangle triangle-top-left"></div>
<div class="triangle triangle-bottom-left"></div>
<div class="triangle triangle-bottom-right"></div>

打開 Codepen 後，你會發現我客製化了一大串 CSS，這是為了實作出上圖你所看到的詭異背景（ 主要是指有三角形的東西 ），遇到這種奇怪的 UI，就別想 FCC 了，就連三角形對應到的標籤，也直接使用 div 就行，不用特別硬要找個 Vuetify 的元件予以替代

今天同樣是持續鍛鍊整合使用 Grids + 一些底層 Component（ 範例中我用的是 v-sheet ）搭配 Vuetify 官網中的章節 Stylies & animations 內雜七雜八的 API。或許看我文章到了第 11 天，你會想說：「 Vuetify 官網就一堆 Examples，我看它的不就好了？ 」，這樣想是沒錯，只是看我寫的程式碼，你會發現我不斷嘗試 FCC，並且靠各種各樣的方式組合出目標 UI，16 天前的教學中所有程式碼細節你都能看懂，並且能自己查找文件，那等到第 16 天開始，對於我們所嘗試仿製的 Google 產品 UI、這些具一定複雜的圖面，你就應能配合官方文件自行開發